<!--选择商品种类对话框-->
<template>
    <div>
        <el-dialog
            title="请选择商品种类"
            :visible.sync="centerDialogVisible"
            :before-close="close"
            :close="close"
            width="50%"
            center>
            <el-checkbox-group v-model="checkedType">
                <el-checkbox
                        v-for="(item, i) in goodsTypeList"
                        :label="item"
                        :key="item.typeId"
                        :checked="isChecked(item)"
                        border>
                    {{item.typeName}}
                </el-checkbox>
            </el-checkbox-group>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close">确 定</el-button>
                <el-button @click="reset">重 置</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "SelectGoodsType",
    props: ['goodsTypeList', 'checked',],
    data() {
        return{
            centerDialogVisible: true,
            // 已选择的种类
            checkedType:[

            ],
        }
    },
    created() {
        console.log(this.checked, 'checked-------------');
        console.log(this.goodsTypeList, 'goodsTypeList-------------');
        // 绑定已选择的种类
        if (this.checked) {
            // this.$set(this.$data,'checkedType',this.checked);
            this.checkedType = JSON.parse(JSON.stringify(this.checked));
            console.log(this.checkedType, 'checkedType-------------');
        }
    },
    methods: {
        // 关闭对话框
        close(){
            console.log(this.checkedType, 'checkedType--------------');
            // let goodsType = this.checkedType.toString();
            // 去重
            let result = [];
            this.checkedType.forEach( (a) => {
                // 只要存在一个相等的就返回true
                let isExist = result.some(b => {
                    return a.typeId === b.typeId;
                });
                if (!isExist) {
                    result.push(a);
                }
            });
            this.$emit('close', result );
        },
        isChecked(item) {
            let flag = false;
            console.log(item, "item----------------");
            if (this.checked.length > 0) {
                for (let i=0; i<this.checked.length; i++) {
                    if (this.checked[i].typeId === item.typeId ) {
                        flag = true;
                        break;
                    }
                }
            }
            console.log(flag, 'flag------------------');
            return flag;
        },

        reset() {
            this.checkedType = [];
            // this.close();
        }
    }
}
</script>

<style lang="scss" scoped>
    /deep/.el-checkbox.is-bordered {
        padding: 9px 10px 9px 10px;
        border-radius: 10px;
        border: 1px solid #dbe6a2;
        box-sizing: border-box;
        line-height: normal;
        height: 40px;
    }
</style>
